<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vs-tree2.0_格式化数据</title>
  <link rel="stylesheet" href="../dist/vs-tree.css">
  <link rel="stylesheet" href="./static/css/index.css">
</head>

<body>
  <div id="tree"></div>
  <script src="../dist/vs-tree.js"></script>
  <script>
    console.time('create:data')
    var id = 1000
    function add(parentId, name) {
      const list = []
      for (var i = 0; i < 100; i++) {
        list.push({ id: '100' + id++, title: name + i, parentId: parentId })
      }
      return list
    }
    const data = {
      id: '1', title: 'zhangsan', parentId: '-1', child: [
        { id: '100', title: 'wangwu', parentId: '1', child: add('100', 'wangwu') },
        { id: '101', title: 'zhaoliu', parentId: '1', child: add('101', 'zhaoliu') },
        { id: '102', title: '异步节点-1', parentId: '1' },
        { id: '103', title: '异步节点-2', parentId: '1' },
        { id: '104', title: '叶子节点-2', parentId: '1' },
        { id: '105', title: '叶子节点-3', parentId: '1' },
        { id: '106', title: '叶子节点-4', parentId: '1' },
        { id: '107', title: '叶子节点-5', parentId: '1' },
        { id: '108', title: '叶子节点-6', parentId: '1' },
        { id: '109', title: '叶子节点-7', parentId: '1' },
        { id: '110', title: '叶子节点-8', parentId: '1' },
        { id: '111', title: '叶子节点-9', parentId: '1' },
      ]
    }
    console.timeEnd('create:data')
    console.time('render:tree');
    const tree = new vsTree.default('#tree', {
      data: data,
      showCheckbox: true,
      max: 0,
      highlightCurrent: false,
      indent: 12, // 缩进
      lazy: true,
      format: function(data) {
        return {
          name: data.title,
          children: data.child,
          isLeaf: !data.child
        }
      }
    });
    console.timeEnd('render:tree');
  </script>
</body>

</html>